<template>
  <div :style="[{backgroundColor: theme.backgroundColor}]" class="head_box cenBet">
    <!-- 左边部分 -->
    <div class="head_left">
      <el-menu style="border-bottom:none" @select="handleSelect" :default-active="activeIndex" :background-color='theme.backgroundColor' :text-color="theme.textColor" :active-text-color="theme.activeTextColor" mode="horizontal">
        <el-menu-item v-for="(item,index) of myHeadNav" :key="index" :index="`${index}`">
          <i v-if="item.meta.icon" :class="item.meta.icon" class="iconfont "></i>
          <span slot="title"> {{ item.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧部分 -->
    <div class="head_right cenCen">
      <theme-picker />
      <layoutSize />
    </div>
  </div>
</template>
<script>
import themePicker from "@/components/themePicker"; //换主题
import layoutSize from "@/components/layoutSize"; //布局大小
export default {
  name: "headNav",
  components: { themePicker, layoutSize },
  data() {
    return {
      activeIndex: "0" //当前导航
    };
  },
  computed: {
    // 主题色
    theme() {
      return this.$store.state.publicVariable.theme;
    },
    // 头部导航
    myHeadNav() {
      let value = [];
      const myRoutes = this.$store.state.router.myRoutes;
      if (myRoutes.children.length) {
        myRoutes.children.map(item => {
          if (item.meta.isNav) {
            //是设置成导航栏的才取值
            value.push(item);
          }
        });
      }
      return value;
    }
  },
  created() {
    this.sureThisPage();
  },
  methods: {
    //导航栏
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      this.sureThisPage();
    },
    // 确定当前展示页面
    sureThisPage() {
      this.$openPage(this.myHeadNav[this.activeIndex].path);
      this.$parent.getThisPageNav();
    }
  }
};
</script>

<style scoped>
@import "./index.css";
</style>
